<template>
  <div>
    <div class="top">
      <div class="tleft">
        <span @click="$router.back()"><van-icon name="arrow-left" /></span>
        <h1>{{ name }}</h1>
      </div>
    </div>
    <div class="seat">
      <div class="seattop">
        <img
          src="https://obj.pipi.cn/festatic/fe-trade/public/img/screen.5725bf7d.png"
          alt=""
        />
        <p>{{th.slice(0,2)}}厅</p>
      </div>
      <div class="seatting">
        <div class="seattbox">
          <ul v-for="(seatitem, index) in seat" :key="index">
            <li v-for="(item, itemindex) in seatitem?.seats" :key="itemindex">
              <div
                v-if="item.columnId !==''"
                @click="dianji(index, itemindex)"
              >
                <p></p>
                <!-- <li v-for="(zwlt,zwindex) in zuoweilist" :key="zwindex">
                <p v-if="zwlt.mvid==mvid&&zwlt.moviesid==moviesid">
                
                </p>
              </li> -->
                <!-- <p >http://p0.meituan.net/moviemachine/2976af246e5fab4f72c52fac9f20ba521398.png</p> -->
              </div>
              <div></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div
        class="tongzhi"
        v-for="(note, noteindex) in detail?.reminder?.notice"
        :key="noteindex"
      >
        <van-notice-bar
          left-icon="volume-o"
          :scrollable="false"
          :text="note.detail"
        />
      </div>
      <div class="xinxibox">
        <div class="name">
          <p>{{ cinema }}</p>
        </div>
        <div class="shijian">
          <div class="date">
            <p>{{ date }}</p>
          </div>
          <div class="time">
            <p>{{ tm }}</p>
          </div>
          <div class="tp">
            <p>{{ tp }}</p>
          </div>
          <div class="lang">
            <p>{{ lang }}</p>
          </div>
        </div>
        <div class="zuowei">
          <div
            class="yixuan"
            v-for="(xuan, xuanindex) in uniqueSeats"
            :key="xuanindex"
          >
            <div class="zuoleft">
              {{ xuan.x }}排{{ xuan.y }}列
              <p>￥{{ price }}</p>
            </div>
            <!-- <div class="zuoleft" v-if="xuan.x==''">
              {{ xuan.x }}排{{ xuan.y }}列
              <p>￥{{ price }}</p>
            </div> -->
            <div class="zuoeight" @click="del(xuan.x, xuan.y)">X</div>
          </div>
        </div>
      </div>
    </div>
    <div class="xuanzuo" @click="now()"><p>请先选座</p></div>
    <!-- <div class="xuanzuo" @click="now()"><p>{{ sum }}</p></div> -->
  </div>
</template>

<script setup>
// import { ref, reactive, computed,onMounted } from "vue";
import { useRouter } from "vue-router";
import { ref,computed } from "vue";
import axios from "@/api/axios.js";
import { showSuccessToast } from "vant";
import { showConfirmDialog } from "vant";
import { useRoute } from "vue-router";
const route = useRoute();
const router = useRouter();
const moviesid = ref(`${route.query.id},`);
const cinema = ref(`${route.query.cinemaName},`);
const tm = ref(`${route.query.tm},`);
const name = ref(`${route.query.ni},`);
const mvid = ref(`${route.query.mvid},`);
const price = ref(`${route.query.price}`);
const date = ref(`${route.query.date}`);
const tp = ref(`${route.query.tp}`);
const lang = ref(`${route.query.yan}`);
const img = ref(`${route.query.img}`);
const th = ref(`${route.query.th}`);
// console.log("影院moviesid",moviesid,);
// console.log("影院名字cinema",cinema,);
// console.log("时间tm",tm,);
// console.log("电影名name",name,);
// console.log("电影mvid",mvid,);
// console.log("价格price",price,);
const zuoweilist = JSON.parse(localStorage.getItem("lists"));
var seats = [];

const dlu = ref([]);
const savedData = JSON.parse(localStorage.getItem("timestamp"));
dlu.value = savedData;
var seatnum = '';
const sum=''
const uniqueSeats = ref([]);
const dianji = (index, itemindex) => {
  
  var seates = { x: index + 1, y: itemindex + 1 };
  seats.push(seates);
  uniqueSeats.value = [
    ...new Set(seats.map((seat) => JSON.stringify(seat))),
  ].map((seat) => JSON.parse(seat));

  // console.log("uniqueSeats", uniqueSeats);
  seatnum=uniqueSeats.value.length
  console.log(seatnum);
  // localStorage.setItem("uniqueSeats", JSON.stringify(uniqueSeats));
};
const del = (x, y) => {
  uniqueSeats.value = uniqueSeats.value.filter((o) => !(o.x == x && o.y == y));
  seatnum=uniqueSeats.value.length
  console.log(seatnum);
  sum.value = price.value * Number(seatnum)
  // console.log(uniqueSeats.value.length);
  // localStorage.setItem("uniqueSeats", JSON.stringify(seats));
};

// const sum = computed(() => {
//     return 
// })

const now = () => {
  if (dlu.value === null) {
    const showConfirm = () => {
      showConfirmDialog({
        title: "请前往登录",
      })
        .then(() => {
          router.push("/loginin");
        })
        .catch(() => {
          // on cancel 取消按钮
        });
    };
    showConfirm();
  } else {
    showSuccessToast(`微信支付成功${price.value}`);
    // router.go(0);
console.log(sum);
    // ticket();
  }
  const obj = {
    seatsid: [...uniqueSeats.value],
    mvname: name.value,
    mvid: mvid.value,
    moviesid: moviesid.value,
    cinema: cinema.value,
    tm: tm.value,
    price: price.value,
    img: img.value,
    date: date.value,
  };
  let arr = JSON.parse(localStorage.getItem("lists")) || [];
  arr = [obj, ...arr];
  console.log(arr);
  window.localStorage.setItem("lists", JSON.stringify([...arr]));
  router.go(0);
};

//座位
const getseat = () =>
  axios.get(`https://apis.netstart.cn/maoyan/cinema/seat.json `);
const detail = ref([]);
const seat = ref([]);
const divideDealList = ref([]);
async function upseat() {
  const { data } = await getseat();
  detail.value = data.data;
  seat.value = detail.value?.seat?.regions[0]?.rows;
  console.log("影院detail", detail);
}
upseat();
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  height: 8vh;
  line-height: 8vh;
  font-size: 18rem;
  color: #fff;
  background-color: #e54847;
  .tleft {
    display: flex;
    width: 75vw;
    h1 {
      margin-left: 100rem;
    }
  }
}
:deep(.van-popover--light) {
  z-index: 2004;
  position: absolute;
  right: -80px;
  top: -7.5px;
}
.seat {
  .seattop {
    width: 325rem;
    height: 30rem;
    margin: 5rem auto 0;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      margin: -18rem 0 0 0;
      font-size: 12rem;
      text-align: center;
    }
  }
  .seatting {
    width: 300rem;
    .seattbox {
      overflow: auto;
      ul {
        margin: 10rem 0 0 0;
        padding: 0;
        list-style: none;
        display: flex;
        li {
          margin: 0;
          padding: 0;
          list-style: none;
          p {
            padding: 0;
            margin: 0 10rem 10rem 0;
            width: 22rem;
            height: 22rem;
            border: 1rem solid black;
          }
        }
      }
    }
  }
}
.bottom {
  background-color: #f4f4f4;
  padding: 15rem;
  margin-bottom: 50rem;
  .xinxibox {
    width: 350rem;
    background-color: #fff;
    padding: 10rem;
    margin: 5rem 0 5rem;
    .name {
      font-size: 13rem;
      color: #333;
    }
    .shijian {
      display: flex;
      font-size: 13rem;
      color: #666;
      margin: 5rem;
      .time {
        margin-left: 10rem;
      }
      .tp {
        margin-left: 10rem;
      }
      .lang {
        margin-left: 10rem;
      }
    }
    .zuowei {
      display: flex;
      flex-wrap: wrap;
      .yixuan {
        width: 50rem;
        margin: 5rem 3rem;
        text-align: center;
        display: flex;
        .zuoeight {
          margin-left: 3rem;
          line-height: 30rem;
        }
      }
    }
  }
}
.xuanzuo {
  width: 365rem;
  height: 44rem;
  margin: 5rem auto;
  color: #fff;
  background-color: #f90;
  border-radius: 15rem;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  justify-content: center;
  align-items: center;
}
</style>
